<template>
  <div class="setting-container">
    <m-header title="系统设置">
      <!-- <img class="rximg" @click="$router.push({path: 'setting/about'})" slot="right" src="../../../assets/imgs/icon-rule@2x.png" alt=""> -->
    </m-header>
    <div class="settingItems">
      <div class="setItms">
        <div class="avatar" @click="$router.push({ path: `/setting/avatar` })">
          <span class="label">头像</span>
          <img :src="userInfo.avatar" alt="">
        </div>
        <div class="accountNo">
          <span class="label">账号</span>
          <span class="content">
            {{userInfo.username}}
          </span>
        </div>
        <div class="nickName" @click="$router.push({ path: `/setting/nickname` })">
          <span class="label">昵称</span>
          <span class="content">
            {{userInfo.nickname}}
          </span>
        </div>
      </div>
      <div class="setItms">
        <div class="bank" @click="$router.push({ path: `/bank/list`, query: { type: 1} })">
          <span class="label">银行卡</span>
          <span class="content"></span>
        </div>
        <div class="withdrawPwd" @click="$router.push({ path: `/setting/withdrawPwd` })">
          <span class="label">提现密码</span>
          <span class="content"></span>
        </div>
        <div class="loginPwd" @click="$router.push({ path: `/setting/loginpasswd` })">
          <span class="label">登录密码</span>
          <span class="content"></span>
        </div>
      </div>
      <div class="setItms">
        <div class="aboutus" @click="$router.push({ path: `/setting/about` })">
          <span class="label">关于我们</span>
          <span class="content" v-if="versionData.is_update">{{versionData.content}}</span>
        </div>
        <div class="clear" @click="clearCache">
          <span class="label">清除缓存</span>
          <span class="content"></span>
        </div>
      </div>
      <div class="loginout" @click="handleLogout">
        退出登录
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  name: 'Setting',
  data () {
    return {
      versionData: {
        // is_update: 1, // 有新版本
        // is_required: '1',
        // content: '新版本：v1.0.20190306',
        // apk_url: 'https://www.try255.com/demo.apk',
        // version: '1.0.20190306'
        // apk_url: '', // 无新版本
        // content: '已经是最新版本',
        // is_required: 0,
        // is_update: 0
      }
    };
  },
  computed: {
    ...mapGetters({
      userInfo: 'mine/userInfo'
    })
  },
  mounted () {
    this.getUseInfo();
    this.getAppVersion();
  },
  methods: {
    ...mapActions({
      getMineInfo: 'mine/mineInfo',
      getVersion: 'mine/getVersion',
      setLogout: 'common/setLogout'
    }),
    getAppVersion () {
      const u = navigator.userAgent;
      const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
      const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      const system = isIOS ? 'ios' : 'android';
      const params = {
        version: '1.0.0',
        system
      }
      this.getVersion(params).then(res => {
        console.log(res)
        this.versionData = res;
      });
    },
    handleLogout () {
      this.setLogout().then(res => {
        this.$router.replace({ path: '/login' });
      });
    },
    getUseInfo () {
      this.getMineInfo();
    },
    clearCache () {
      // localStorage.clear();
      // sessionStorage.clear();
      setTimeout(() => {
        this.$vux.toast.text('清除缓存成功');
      }, 1500);
    }
  }
};
</script>

<style lang="less">
  .setting-container {
    position:relative;
    width: 100%;
    height: 100%;
    padding-top: 0.92rem;
    padding-bottom: 0.2rem;
    background: #f7f7f7;
    box-sizing: border-box;
    .settingItems {
      .setItms {
        margin-bottom: 0.2rem;
        background: #ffffff;
        & > div {
          position: relative;
          height: 0.8rem;
          line-height: 0.8rem;
          &:before {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            height: 1px;
            border-bottom: 1px solid #D9D9D9;
            color: #D9D9D9;
            -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
          }
          &:last-child:before {
            display: none;
          }
          &:after {
            content: '';
            position: absolute;
            right: 0.3rem;
            top: 0.24rem;
            width: 0.16rem;
            height: 0.32rem;
            background-image: url('../../../assets/imgs/icon-next@2x.png');
            background-size: 0.14rem 0.28rem;
            background-repeat: no-repeat;
          }
          &.accountNo:after {
            display: none;
          }
        }
        .avatar {
          height: 1.6rem;
          line-height: 1.6rem;
          img {
            float: right;
            margin-top: 0.3rem;
            margin-right: 0.76rem;
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
          }
          &:after {
            top: 0.64rem;
          }
        }
      }
      .label {
        font-size: 0.3rem;
        color: #333;
        padding-left: 0.3rem;
      }
      .content {
        float: right;
        font-size: 0.28rem;
        color: #999999;
        padding-right: 0.76rem;
      }
      .loginout {
        margin-top: 0.2rem;
        height: 0.8rem;
        line-height: 0.8rem;
        font-size: 0.3rem;
        color: #333;
        text-align: center;
        background: #ffffff;
      }
    }
  }
</style>
